<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :show-close="false"
    width="90%"
    @close="close"
  >
    <template #title>
      <div style="display: flex; justify-content: space-between">
        <div style="font-size: 16px">
          作品管理
          <B style="color: #a3a6ad"><vab-icon icon="arrow-right-s-line" /></B>
          作品{{ title }}
        </div>
        <vab-icon
          icon="close-circle-line"
          style="
            font-size: 24px;
            cursor: pointer;
            color: crimson;
            margin-top: -5px;
          "
          @click="close"
        />
      </div>
    </template>

    <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
      <div style="display: flex; flex-direction: row">
        <div style="display: flex; flex-direction: column; flex: 3">
          <el-form-item label="作品名称" prop="title">
            <el-input v-model.trim="form.title" :placeholder="''" />
          </el-form-item>
          <el-form-item label="所属艺人" prop="artistId">
            <el-select
              v-model="form.artistId"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in artistList"
                :key="item.id"
                :label="item.name"
                style="width: 100%"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属专辑" prop="albumId">
            <el-select
              v-model="form.albumId"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in albumList"
                :key="item.id"
                :label="item.albumTitle"
                style="width: 100%"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="label">
            <el-input v-model.trim="form.label" :placeholder="''" />
          </el-form-item>
          <el-form-item label="时长" prop="playTime">
            <el-input v-model.trim="form.playTime" :placeholder="''" />
          </el-form-item>
        </div>
        <div style="display: flex; flex-direction: column; flex: 2">
          <el-form-item label="封面" prop="coverImgId">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
              "
            >
              <el-image
                v-if="form.coverImgUrl"
                :preview-src-list="[form.coverImgUrl]"
                :src="form.coverImgUrl"
                style="height: 60px; width: 60px"
              />
              <el-button
                style="
                  background-color: #58b5e1;
                  color: #fff;
                  border: 0px;
                  font-size: 14px;
                  margin-left: 40px;
                "
                @click="toClickUpLoad"
              >
                上传封面
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="歌词介绍">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
              "
            >
              <el-image
                v-if="form.lyricIntroductionUrl"
                :preview-src-list="[form.lyricIntroductionUrl]"
                :src="form.lyricIntroductionUrl"
                style="height: 60px; width: 60px"
              />
              <el-button
                style="
                  background-color: #58b5e1;
                  color: #fff;
                  border: 0px;
                  font-size: 14px;
                  margin-left: 40px;
                "
                @click="toClickUpLoadLY"
              >
                上传图片
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="曲谱介绍">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
              "
            >
              <el-image
                v-if="form.scoreIntroductionUrl"
                :preview-src-list="[form.scoreIntroductionUrl]"
                :src="form.scoreIntroductionUrl"
                style="height: 60px; width: 60px"
              />
              <el-button
                style="
                  background-color: #58b5e1;
                  color: #fff;
                  border: 0px;
                  font-size: 14px;
                  margin-left: 40px;
                "
                @click="toClickUpLoadSC"
              >
                上传图片
              </el-button>
            </div>
          </el-form-item>
        </div>
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 2;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
            "
          >
            <el-select
              v-model="form.type"
              filterable
              placeholder="请选择类型"
              style="width: 100%"
            >
              <el-option label="音频" :value="1" />
              <el-option label="视频" :value="2" />
              <el-option label="pdf" :value="3" />
              <el-option label="图片" :value="4" />
            </el-select>
            <el-button
              :disabled="!form.type"
              style="
                background-color: #58b5e1;
                color: #fff;
                border: 0px;
                font-size: 14px;
                margin-left: 40px;
              "
              @click="toClickUpLoadMp3"
            >
              上传作品
            </el-button>
          </div>
          <audio
            v-if="form.resourceUrl && form.resourceUrl.endsWith('mp3')"
            controls="controls"
            style="width: 80%; margin-top: 20px"
          >
            <source :src="form.resourceUrl" type="audio/mp3" />
          </audio>
          <video
            v-if="form.resourceUrl && form.resourceUrl.endsWith('mp4')"
            controls="controls"
            style="width: 80%; margin-top: 20px"
          >
            <source :src="form.resourceUrl" type="audio/mp3" />
          </video>

          <div
            v-if="form.resourceUrl && form.resourceUrl.endsWith('pdf')"
            style="margin-top: 20px"
          >
            <a :href="form.resourceUrl" target="_blank">预览/下载 PDF</a>
          </div>
          <div
            v-if="form.resourceUrl && form.resourceUrl.endsWith('g')"
            style="margin-top: 20px"
          >
            <el-image
              v-if="form.resourceUrl"
              :preview-src-list="[form.resourceUrl]"
              :src="form.resourceUrl"
              style="height: 60px; width: 60px"
            />
          </div>
        </div>
      </div>

      <!-- 富文本编辑器 -->

      <el-form-item label="歌曲介绍">
        <quill-editor
          ref="quillEditor"
          v-model:content="form.musicIntroduction"
          content-type="html"
          :options="myOptions"
          style="width: 100%; height: 250px"
          @update:content="updateQuill"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button style="font-size: 16px" @click="close">取 消</el-button>
      <el-button
        style="
          background-color: #0d66b2;
          color: #fff;
          border: 0px;
          font-size: 14px;
        "
        @click="save"
      >
        {{ title == '添加' ? '添加' : '保存' }}
      </el-button>
    </template>
  </el-dialog>
  <el-upload
    accept=".jpg,.jpeg,.png"
    :action="baseURL + 'public/upload'"
    class="main_img_upload"
    :headers="headers"
    :on-success="handleSuccess"
    :show-file-list="false"
  />
  <el-upload
    accept=".jpg,.jpeg,.png"
    :action="baseURL + 'public/upload'"
    class="main_img_uploadLY"
    :headers="headers"
    :on-success="handleSuccessLY"
    :show-file-list="false"
  />
  <el-upload
    accept=".jpg,.jpeg,.png"
    :action="baseURL + 'public/upload'"
    class="main_img_uploadSC"
    :headers="headers"
    :on-success="handleSuccessSC"
    :show-file-list="false"
  />
  <el-upload
    :accept="
      form.type == 1
        ? '.mp3'
        : form.type == 2
        ? '.mp4'
        : form.type == 3
        ? '.pdf'
        : '.jpg,.jpeg,.png'
    "
    :action="baseURL + 'public/upload'"
    class="main_img_upload_mp3"
    :headers="headers"
    :on-success="handleSuccessMp3"
    :show-file-list="false"
  />
</template>

<script>
  import {
    defineComponent,
    getCurrentInstance,
    reactive,
    toRefs,
    computed,
  } from 'vue'
  import { useStore } from 'vuex'
  import { doEdit } from '@/api/works'
  import { baseURL } from '@/config/net.config'
  import { QuillEditor } from '@vueup/vue-quill'
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import { getAlbumList, getArtistList } from '@/api/publicAuth'

  export default defineComponent({
    name: 'TableEdit',
    components: {
      QuillEditor,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance()
      const store = useStore()

      const state = reactive({
        formRef: null,
        quillEditor: null,
        title: null,
        albumList: [],
        artistList: [],
        form: {},
        rules: {
          title: [
            { required: true, trigger: 'blur', message: '请输入作品名称' },
          ],
          artistId: [
            { required: true, trigger: 'blur', message: '请选择所属艺人' },
          ],
        },
        dialogFormVisible: false,
        baseURL: baseURL,
        headers: {
          Authorization: computed(() => store.getters['user/token']),
        },
        myOptions: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'code-block'],
              [{ header: 1 }, { header: 2 }],
              [{ size: ['small', false, 'large', 'huge'] }, { align: [] }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['link', 'image', 'video'],
              [{ direction: 'rtl' }],
              [{ color: [] }, { background: [] }],
              ['clean'],
            ],
          },
          placeholder: '请输入内容...',
        },
        content: '<p>12312</p>', // 这里定义 content
      })

      const showEdit = async (row) => {
        const { data } = await getAlbumList()
        state.albumList = data
        const { data: data1 } = await getArtistList()
        state.artistList = data1
        if (!row.id) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }

      const updateQuill = (newContent) => {
        state.musicIntroduction = newContent // 更新 content
      }

      const close = () => {
        state.form = {}
        state.dialogFormVisible = false
      }

      const save = () => {
        state.formRef.validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      const toClickUpLoad = () => {
        document.querySelector('.main_img_upload input').click()
      }
      const toClickUpLoadMp3 = () => {
        document.querySelector('.main_img_upload_mp3 input').click()
      }
      const toClickUpLoadLY = () => {
        document.querySelector('.main_img_uploadLY input').click()
      }
      const toClickUpLoadSC = () => {
        document.querySelector('.main_img_uploadSC input').click()
      }

      const handleSuccess = async (res) => {
        if (res.stat === 200) {
          state.form.coverImgUrl = res.url
          state.form.coverImgId = res.resourceId
        } else {
          proxy.$baseMessage(res.msg, 'error', 'vab-hey-message-error')
        }
      }

      const handleSuccessMp3 = async (res) => {
        if (res.stat === 200) {
          state.form.resourceUrl = res.url
          state.form.resourceId = res.resourceId
        } else {
          proxy.$baseMessage(res.msg, 'error', 'vab-hey-message-error')
        }
      }

      const handleSuccessLY = async (res) => {
        if (res.stat === 200) {
          state.form.lyricIntroductionUrl = res.url
          state.form.lyricIntroduction = res.resourceId
        } else {
          proxy.$baseMessage(res.msg, 'error', 'vab-hey-message-error')
        }
      }

      const handleSuccessSC = async (res) => {
        if (res.stat === 200) {
          state.form.scoreIntroductionUrl = res.url
          state.form.scoreIntroduction = res.resourceId
        } else {
          proxy.$baseMessage(res.msg, 'error', 'vab-hey-message-error')
        }
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        toClickUpLoad,
        handleSuccess,
        updateQuill,
        handleSuccessMp3,
        handleSuccessLY,
        handleSuccessSC,
        toClickUpLoadMp3,
        toClickUpLoadLY,
        toClickUpLoadSC,
      }
    },
  })
</script>
